<template>
  <div class="container">
    <div class="item" v-for="(item,index) in value" :key="index" >
      <img class="img" :src="imgDomain + item" mode="aspectFill" @click="openImage(value,index)">
      <div class="tips" @click="delImage(index)">删除</div>
    </div>
    <div class="item">
      <div class="add" @click="addImage()">
        <img class="ic" src="https://qiniu.mctower.runworld.com.cn/static-image/ic_repair_camera.png" mode="widthFix">
        <div>点击添加</div>
        <div class="tex">{{text?text:'最多可添加'+limit+'张'}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  // import { getQiniu } from '@/api/api'

  export default {
    name: 'ImageUpload',

    data() {
      return {
        token: '',
        valueShow: [],
      };
    },

    created() {
      // this.network().getQiniu()
    },

    props: {
      value: {
        type: Array,
        required: true,
      },
      limit: {
        type: Number,
        default: 9,
      },
      text: {
        type: String,
        default: '',
      },
    },

    watch: {
      value(val) {
        console.log('value', val) // 勿删
        const valueShow = []
        val.forEach((item) => { valueShow.push(this.imgDomain + item) })
        this.valueShow = valueShow

        this.$emit('input', this.value)
      },
    },

    computed: {
    },

    methods: {
      addImage() {
        uni.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success: (res) => {
            const filePath = res.tempFiles[0].path;
            const filename = filePath.substr(filePath.lastIndexOf('/') + 1);
            uni.showLoading({ title: 'Loading...', mask: true });
            uni.uploadFile({
              filePath,
              url: 'https://upload-z2.qiniup.com',
              name: 'file',
              header: { 'Content-Type': 'multipart/form-data' },
              formData: {
                token: this.token,
                file: filename,
              },
              success: (res1) => {
                console.log('图片上传到七牛', res1)
                const data = JSON.parse(res1.data)
                if (!data || !data.key) return
                this.value.push(data.key)
                uni.hideLoading();
              },
              fail(res1) {
                console.log(res1)
                uni.hideLoading();
              },
            })
          },
        })
      },

      delImage(index) {
        this.value.splice(index, 1);
      },

      network() {
        return {
          getQiniu: async () => {
            // const { data } = await getQiniu()
            // console.log('获取七牛信息', data);
            // this.token = data.token
            // this.imgDomain = data.url
          },
        };
      },
    },
  };
</script>

<style lang="scss" scoped>
  .container{
    display: flex;
    justify-content: space-between;
    text-align: center;
    flex-wrap: wrap;
    .item{
      margin-top: 20rpx;
      width: 330rpx;
      border-radius: 20rpx;
      background: #FFFFFF;
      .img,.add{
        width: 100%;
        height: 330rpx;
        vertical-align: middle;
      }
      .add{
        padding-top: 100rpx;
        color: #ABB2B7;
        .ic{
          width: 70rpx;
          height: 70rpx;
          margin-bottom: 30rpx;
        }
        .tex{
          font-size: 24rpx;
          margin-top: 8rpx;
        }
      }
      .tips{
        width: 100%;
        line-height: 72rpx;
        color: #ABB2B7;
        font-size: 24rpx;
        box-shadow:0rpx -6rpx 24rpx 0rpx rgba(0,0,0,0.07);
      }
    }
  }
</style>
